import { lazy, ReactNode, Suspense } from "react";
import { Navigate, RouteObject } from "react-router-dom";

//解决白屏现象
const lazyLoad = (children: ReactNode): ReactNode => {
  return <Suspense fallback={<> loading </>}> {children} </Suspense>;
};

const Index = lazy(() => import("../views/index"));
const Voice = lazy(() => import("../views/voice/index"));
const Case = lazy(() => import("../views/case"));

const routes: RouteObject[] = [
  {
    path: "/",
    element: lazyLoad(<Index />),
  },
  {
    path: "/case",
    element: lazyLoad(<Case />),
  },
  {
    path: "/voice",
    element: lazyLoad(<Voice />),
  },
  {
    path: "*",
    element: <Navigate to="/" />,
  },
];

export default routes;
